<template>
 <div class="page"  style="width: 70%; background: #ebeef5; color: black; border: 1px solid #FFFFFF;padding: 20px;margin: 20px auto;border-radius: 8px;position: relative;">
   <div>
        <p class="title">基本信息</p>
        <div style="width: 100%">
          <div style="width: 100%;display: flex;justify-content: start;align-items: center">
            <div style="width: 66%">
              <div class="input-form">
                <span>姓名</span><input v-model="personInfo.xm0000" readonly placeholder="姓名">
              </div>
              <div class="input-form">
                <span>性别</span><input v-model="personInfo.xb0000" readonly placeholder="性别">
              </div>
              <div class="input-form">
                <span>年龄</span><input v-model="personInfo.nl0000" readonly placeholder="年龄">
              </div>
            </div>
            <img v-if="personInfo?.txwjxh" alt="avatar" style="margin-left: 0.6rem;width: 2.6rem;height: 3.0rem" :src="baseUrl+'/upload/get/stream?wjxh00='+personInfo.txwjxh">
            <img v-else alt="avatar" style="margin-left: 1rem;width: 2.5rem;" src="@/assets/icon-person.png">
          </div>
          <div class="input-form">
            <span>身份证号</span><input v-model="personInfo.sfzh00" readonly placeholder="身份证号">
          </div>
          <div class="input-form">
            <span>文化程度</span><input v-model="personInfo.whcd00" readonly placeholder="文化程度">
          </div>
          <div class="input-form">
            <span>联系电话</span><input v-model="personInfo.sjhm00" readonly placeholder="联系电话">
          </div>
          <div class="input-form">
            <span>政治面貌</span><input v-model="personInfo.zzmm00" readonly placeholder="政治面貌">
          </div>
          <div class="input-form">
            <span>通讯地址</span><input v-model="personInfo.txdz00" readonly placeholder="通讯地址">
          </div>
        </div>
        <p class="title">技能证书</p>
        <div style="width: 100%">
          <div class="bottom-btn-group" style="margin-top: -.6rem">
            <button class="next-btn next-btn-small" @click="showDialog = true">添加证书</button>
          </div>
          <div v-for="(item,i) in skillCertList" v-if="item.mc0000 && item.jnzszt === '1'" :key="i" class="skill-item">
            <p style="font-size: 0.4rem;font-weight: 600">{{item.mc0000}}</p>
            <p>工种：{{jobKind[item.gz0000]}}</p>
          </div>
        </div>
      </div>

   <van-dialog v-model="showDialog" title="添加技能证书" width="600px" show-cancel-button show-confirm-button theme="round-button" :before-close="handleConfirm">
     <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
       <div class="dialog-input-form">
         <span>*工种</span>
         <div style="width: 100%">
           <select v-model="jobKindFirstVal" style="width: 39%" @change="handleSelectJobKind">
             <option value="">请选择</option>
             <option v-for="(item) in jobKindFirst" :key="item.value" :value="item.value">{{ item.name }}</option>
           </select>
           <select v-model="cert.gz" style="width: 45%;margin-left: 0.05rem" >
             <option value="">请选择</option>
             <option v-for="(item) in jobKindOptions" :key="item.value" :value="item.value">{{ item.name }}</option>
           </select>
         </div>
       </div>
       <div class="dialog-input-form">
         <span>*证书名称</span>
         <input v-model="cert.name" placeholder="请输入证书名称">
       </div>
       <div class="dialog-input-form" style="align-items: start;">
         <span>*技能证书</span>
         <van-badge v-if="cert.base64">
           <img style="width: 1.8rem;border: 2px solid lightgrey;border-radius: 10px" :src="`data:image/jpeg;base64,${cert.base64}`" alt="add">
           <template #content>
             <van-icon name="cross" class="badge-icon" @click="cert.base64=''"/>
           </template>
         </van-badge>
         <img v-else @click="handleOpenCamera" style="width: 1.4rem;height: 1.4rem;border: 2px solid lightgrey;border-radius: 10px" src="@/assets/icon-add.png" alt="add">
       </div>
     </div>
   </van-dialog>
  </div>
</template>

<script>
import {commonApi, positionApi} from "@/api";
import {getDicts} from "@/utils/dict";

export default {
  name:"person-info",
  data(){
    return {
      title: "",
      from: "",
      baseUrl: import.meta.env.VITE_BASE_URL,
      dicts: {},
      personInfo: {},
      skillCertList: [],
      jobKind: {},
      jobKindFirst: [],
      jobKindSecond: {},
      jobKindOptions: [],
      jobKindFirstVal: "",
      showDialog: false,
      cert: {
        gz: "",
        name: "",
        base64: ""
      }
    }
  },
  async created() {
    window.onTakePicResult = this.onTakePicResult
    this.from = this.$route.query.from
    if (this.from === 'job'){
      this.title = "窗口登记"
    } else {
      this.title = "信息查询"
    }
    this.dicts = await getDicts("xb0000,whcd00,zzmm00")
  },
  mounted() {
    this.queryInfo()
    this.queryJobKind()
  },
  methods: {
    jumpTo(url){
      this.$router.push(url)
    },
    queryInfo(){
      commonApi.queryInfo().then((res)=>{
        this.personInfo = {
          ...res.data,
          xb0000: this.dicts['xb0000'][res.data.xb0000],
          whcd00: this.dicts['whcd00'][res.data.whcd00],
          zzmm00: this.dicts['zzmm00'][res.data.zzmm00]
        }
      })
    },
    querySkillCert(){
      commonApi.querySkillCert().then((res)=>{
        this.skillCertList = res.data
      })
    },
    queryJobKind(){
      positionApi.queryJobKind().then((res)=>{
        for (let item of res.data){
          this.jobKindFirst.push({name: item.gzmc00,value: item.gzbm00})
          let subList = []
          for (let subItem of item.treeVoList){
            subList.push({name: subItem.gzmc00,value: subItem.gzbm00})
            this.jobKind[subItem.gzbm00] = subItem.gzmc00
          }
          this.jobKindSecond[item.gzbm00] = subList
        }
        this.querySkillCert()
      })
    },
    handleSelectJobKind(){
      this.cert.gz = ""
      this.jobKindOptions = this.jobKindSecond[this.jobKindFirstVal]
    },
    handleOpenCamera(){
      window.android.takePic()
    },
    onTakePicResult(image){
      if (image){
        this.cert.base64 = image
      } else {
        this.$dialog.alert({
          message: "未获取到照片！",
          title: "系统提示",
          theme: "round-button"
        })
      }
    },
    handleConfirm(action,done){
      if (action === "confirm"){
        if (!this.cert.gz){
          this.$dialog.alert({
            title: "系统提示",
            message: "请选择工种",
            theme: "round-button"
          })
          done(false)
          return
        }
        if (!this.cert.name){
          this.$dialog.alert({
            title: "系统提示",
            message: "请输入证书名称",
            theme: "round-button"
          })
          done(false)
          return
        }
        if (!this.cert.base64){
          this.$dialog.alert({
            title: "系统提示",
            message: "请上传技能证书",
            theme: "round-button"
          })
          done(false)
          return
        }
        commonApi.uploadBase64({
          base64: "data:image/jpeg;base64,"+this.cert.base64,
          folder: "common/device/cert"
        },{
          showLoading: true
        }).then((res)=>{
          const xh = res.data
          commonApi.saveSkillCert({
            gz0000:this.cert.gz,
            mc0000:this.cert.name,
            jnzswjxh: xh
          },{
            showLoading: true
          }).then((res)=>{
            this.$dialog.alert({
              message: "技能证书添加成功！",
              title: "系统提示",
              theme: "round-button"
            })
            this.cert = {
              gz: "",
              name: "",
              base64: ""
            }
            this.querySkillCert()
          })
        }).finally(()=>{
          done()
        })
      }else {
        done()
      }

    }
  }
}
</script>
<style scoped lang="less">
.title {
  font-size: 0.4rem;
  color: rgb(14, 1, 1);
  margin: 0.14rem;
}
.input-form {
  width: 100%;
  margin: 0.16rem 0;
  display: flex;
  justify-content: start;
  align-items: center;

  span {
    font-size: 0.4rem;
    color: rgb(12, 10, 10);
    width: 2rem;
    text-align: start;
  }

  input {
    font-size: 0.4rem;
    color: black;
    width: 70%;
    border: none;
    border-radius: 10px;
    padding: 0.16rem;
  }
}

.bottom-btn-group {
  width: 95%;
  display: flex;
  justify-content: end;

  .next-btn {
    width: 2.6rem;
    height: 0.875rem;
    border: none;
    border-radius: 10px;
    font-size: 0.4rem;
    color: white;
    background-color: #359AEB;
    margin-left: 0.1rem;
  }
  .next-btn-small {
    width: 2.2rem;
    height: 0.6rem;
    font-size: 0.35rem;
  }
}

.skill-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.345rem;
  background: whitesmoke;
  border-radius: 15px;
  padding: 0.15rem 0.18rem;
  margin: 0.3rem;
  text-align: start;

  p {
    margin: 0.15rem;
  }
}
.dialog-input-form {
  width: 90%;
  margin: 0.16rem 0;
  display: flex;
  justify-content: start;
  align-items: center;

  span {
    font-size: 0.3rem;
    color: black;
    width: 25%;
    text-align: end;
    margin-right: 0.2rem;
  }

  input {
    font-size: 0.3rem;
    color: black;
    width: 63%;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to left,lightsteelblue,lightblue);
    padding: 0.2rem;
  }

  select {
    font-size: 0.3rem;
    color: black;
    width: 60%;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to left,lightsteelblue,lightblue);
    padding: 0.2rem;
  }
}

.badge-icon {
  display: block;
  font-size: 14px;
  line-height: 20px;
}
</style>
